page{
  height: 100%;
  background-color: #F7B40A;

}
.container {
  display: block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
  background-color: #F7B40A;
}

.navbar-title {
  position: absolute;
  height: 32px;
  line-height: 32px;
  /* width: 100%; */
  width: 320rpx;
  text-align: center;
  font-size: 17px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 28%;
}

.navbar-scan {
  width: 28px;
  height: 28px;
}

.select_container {
  position: absolute;
  left: 0;
  height: 32px;
  display: flex;
  align-items: center;
  width: 200rpx;
  padding-left: 25rpx;
  .student_name {
    color: #fff;
    white-space: nowrap;
    font-size: 13px;
  }
  image {
    display: block;
    width: 25rpx;
    height: 14rpx;
    margin-left: 5px;
    transition: all .1s;
    &.cur {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  .student_list {
    position: absolute;
    left: 20rpx;
    width: 200rpx;
    box-sizing: border-box;
    background: #fff;
    border: 2rpx solid #fff;
    box-shadow: 0 3rpx 3rpx 0 rgba(0, 0, 0, 0.05);
    opacity: 0.96;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    font-size: 26rpx;
    color: #333;
    padding: 0 16rpx;
    text {
      text-align: center;
      line-height: 60rpx;
      width: 100%;
      border-bottom: 1rpx solid #E6E6E6;
      &:last-child {
        border-bottom: 0;
      }
    }
    &:before {
      position: absolute;
      content: '';
      border-bottom: 15rpx solid #fff;
      border-right: 10rpx solid transparent;
      border-left: 10rpx solid transparent;
      border-top: 15rpx solid transparent;
      top: -30rpx;
      right: 30rpx;
    }
  }
}

.information_container {
  width: 100%;
  background: #F1AB23;
  text-align: center;
  height: 64rpx;
  line-height: 64rpx;
  margin-top: 10rpx;
  position: relative;
  .swiper_container {
    height: 100%;
    width: 100%;
  }
  .swiper_item {
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 60rpx 0 76rpx;
    box-sizing: border-box;
    letter-spacing: 0px;
    color: #fff;
    text-align: left;
  }
  .icon_notice {
    position: absolute;
    left: 24rpx;
    font-weight: 550;
    top: 50%;
    width: 30rpx;
    height: 28rpx;
    font-size: 50rpx;
    transform: translate(0, -50%);
    color: #ff495e;
  }
  .look_more {
    background-color: #fff;
    position: absolute;
    right: 0;
    width: 138rpx;
    height: 100%;
    top: 0;
    z-index: 2;
    color: #F8B500;
    font-size: 26rpx;
    border-radius: 32rpx 0 0 32rpx;
    box-shadow: -5rpx 6rpx 5rpx rgba(0, 0, 0, .1);
  }
}

.calendar_container {
  padding: 19rpx 49rpx;
  .panel {
    background: #fff;
    border-radius: 70rpx;
    min-height: 700rpx;
    position: relative;
    padding: 37rpx 0 0;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 346rpx;
        height: 82rpx;
      }
    }
    & > view {
      position: relative;
      z-index: 2;
    }
    &:after, &:before {
      background-color: #fff;
      content: '';
      position: absolute;
      border-radius: 70rpx;
      height: 100%;
      left: 50%;
      z-index: 0;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
    }
    &:after {
      opacity: .3;
      bottom: -20rpx;
      width: 90%;
    }
    &:before {
      opacity: .1;
      bottom: -40rpx;
      width: 80%;
    }
  }
}

.course_list {
  padding: 60rpx 32rpx 20rpx;
  .list_item {
    display: flex;
    align-items: center;
    height: 140rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 18rpx 0 rgba(86, 62, 14, 0.18);
    border-radius: 24rpx;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    .course_info {
      flex: 1;
      display: flex;
      flex-direction: column;
      .course_name {
        font-size: 28rpx;
        color: #333;
      }
      .course_time {
        font-size: 26rpx;
        margin-top: 5rpx;
        color: #999;
      }
    }
    .look_btn {
      height: 60rpx;
      line-height: 60rpx;
      color: #fff;
      background: #F7B40A;
      border-radius: 30rpx;
      padding: 0 20rpx;
      position: relative;
      &:active {
        background: #F77B37;
      }
      .ind_num {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background-color: #FF4B22;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        line-height: 30rpx;
        color: #fff;
        font-size: 20rpx;
        top: -10rpx;
        right: -10rpx;
      }
      &.no_message {
        background-color: #ccc;
      }
    }
  }
}

//日历

.calendar_title {
  font-size: 30rpx;
  color: #FDB62B;
  overflow: hidden;
  view{
    padding: 30rpx 26rpx;
    display: flex;
    align-items: center;
    image{
      margin-left: 15rpx;
      width: 34rpx;
      height: 34rpx;
    }
  }
}

/* 日历 */
.calendar {
  width: 100%;
  border-bottom-right-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  padding: 0 0 20rpx;
  font-family: FZZhunYuan-M02S;
}

.header {
  width: 100%;
}
.header > view {
  display: inline-block;
  width: 14.285%;
  color: #999;
  font-size: 28rpx;
  text-align: center;
  padding: 0;
}

.date-box {
  font-size: 0;
  padding: 10rpx 0;
  width: 100%;
  margin: 0 auto;
}

.date-box > view {
  position: relative;
  display: inline-block;
  font-size: 28rpx;
  width: 14.285%;
  color: #666;
  text-align: center;
  vertical-align: middle;
}

.date-head {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 28rpx;
  position: relative;
  &.date-dot{
    &:after{
      content: '';
      position: absolute;
      top: 28rpx;
      right: 17rpx;
      width:10rpx;
      height:10rpx;
      background:rgba(255,75,34,1);
      box-shadow:0 7rpx 27rpx 0 rgba(250,112,102,0.51);
      border-radius:50%;
    }
  }
  text{
    position: absolute;
    bottom:12rpx;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: 20rpx;
    color: #FF4B22;
    height: 20rpx;
    line-height: 20rpx;

  }
}

.nowDay .date-head {
  text-align: center;
  color: #FF4B22;
  font-weight: 500;
  font-size: 32rpx;
  margin: 0 auto;
}

.date-box .cur .date-head{
  &:before{
    content:'';
    background-color: #efefef;
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -40rpx;
    margin-left: -40rpx;
    border-radius: 50%;
    z-index: -1;
  }
}